import { Story, Canvas } from '@storybook/addon-docs';

# Sorting

Enabling Sorting in React Data Table is easy. Simply add the `sortable` prop to any column definition you want to be sortable. Also make sure a `selector` has been defined.

```js
const columns = [
	{
		name: 'Title',
		selector: row => row.title,
		sortable: true,
	},
	{
		name: 'Director',
		selector: row => row.director,
		sortable: true,
	},
	{
		name: 'Year',
		selector: row => row.year,
		sortable: true,
	},
];
```

<Canvas>
	<Story id="sorting-basic--basic" />
</Canvas>

# Default Sort Field

To load your table with a pre sorted column specify the `defaultSortFieldId`. The `defaultSortFieldId` will correspond to the order of your columns starting at the number 1:

```js
const columns = [
<DataTable title="Movie List" columns={columns} data={data} defaultSortFieldId={1} />
```

You can also specify your own column `id` as long as each column definition `id` is unique.

<Canvas>
	<Story id="sorting-basic--basic" />
</Canvas>
